<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.lp.cfg.ProConfig"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
	<title><%=ProConfig.PROJECT_NAME %></title>
	<%@ include file="/WEB-INF/wechat/iot/common/resource_lib.jsp"%>
	<style type="text/css">
		body, html {
		    height: 100%;
		    -webkit-tap-highlight-color: transparent;
		}
		p.weui-tabbar__label{
			color:#999 !important ;
		}
		.weui-tabbar__icon {
		    width: 24px;
		    height: 24px;
		}
		.weui-tabbar__icon.active img.active{
			display: block;
		}
		.weui-tabbar__icon.active img{
			display: none;
		}
		.weui-tabbar__icon img{
			display: block;
		}
		.weui-tabbar__icon img.active{
			display: none;
		}
		.content-style{
			background-color: white;
			margin: 6px;
			border-radius: 5px;
			padding: 7px;
		}
		.scene-title{
			font-weight: 700;
			color: #333;
			font-size: 16px;;
		}
		.scene-type{
			display: inline-block;
			width: 10px;
			height: 10px;
		}
	</style>
</head>
<body>
	<div class="weui-tab">
		<div class="body-container" style="height: 100%;overflow: auto;">
			<div class="container">
			</div>
			<%@ include file="/WEB-INF/wechat/iot/common/pager.jsp"%>
			<div style="height: 50px;width: 100%;"></div>
		</div>
		<%@ include file="/WEB-INF/wechat/iot/moudle/operate.jsp"%>
	</div>
	
	<div class="hide" id="template">
		<div class="content-style p-10 m-10 pointer" tag={5}>
			<div class="clear">
				<div class="float-left" style="width: 30%;  ">
					<img {0} style="border-radius: 50%;vertical-align: middle;max-height: 100px;" width="100%"  />
				</div>
				<div class="float-left pl-20" style="width: 50%;padding-top: 10px;"　>
					<p class="pt-5 scene-title">{1}</p>
					<div class="pl-10" style="color: #838383;font-size: 14px;">
						<p class="font-16 font-text-color pb" >
							<span class="dot" style="background: red;"></span>
							<span class="pl-5">未读报警</span>
							<span class="pl-5" style="font-size: 16px;color:#333;" >{2}</span>
						</p>
						<p class="font-16 font-text-color pb" >
							<span class="dot" style="background: #3499db;"></span>
							<span class="pl-5">设备数量</span>
							<span class="pl-5" style="font-size: 16px;color:#333;">{3}</span>
						</p>
					</div>
					<!-- <p class="font-16 font-text-color pb" style="color: #838383;font-size: 14px;">
						<span>创建时间</span>
						<span>{4}</span>
					</p> -->
				</div>
			</div>
			<div style="border-top: 1px solid #d9d9d9;overflow: hidden;text-align: center;padding-top: 5px;margin-top: 5px;">
				<div style="float: left;width: 50%;">
					<div style="border-right: 1px solid #a9a9a9;color:#555;" onclick="forward('/wiot/device?id={5}')" >
						设备监控					
					</div>
				</div>
				<div style="float: left;width: 50%;color:#555;" onclick="forward('/wiot/video?id={5}')">
					           视频监控
				</div>
			</div>
		</div>
	</div>
	
</body>
<script type="text/javascript">
	$(".weui-tabbar .weui-tabbar__icon").eq(0).addClass("active");
	$(function(){

		function getData(n){
			postAjax(localUrl+"/self/page/scene.json?paged="+n, data,function(data){
				if(isOK(data)){
					var dataT = data.data.data ;
					for(var i=0;i<dataT.length;i++){
						$(".container").append( $("#template").html().format( ' src="' +getImg(dataT[i].img_id) +'" ' ,dataT[i].name,dataT[i].unread_alarm,
								dataT[i].device_num,time2Str(dataT[i].atime,'yy/MM/dd hh:mm'),dataT[i].id ));					
					}
					
					if(data.data.totalPage > data.data.paged){
						loading = false;						
					}else{
						loading =true ;	
					}
					
				}else{
					loading =true ;	
				}
				// 传data就可以，分页的
				pagerinit(data,".container");
			});	
		}
		
		function getImg(t){
			if(validater.empty(t)){
				return "<%=basePath%>/image/wechat/iot/tinmg.png" ;
			}else{
				return imgUrl+t ;
			}
		}
		
		// 查询条件
		var data = {} ;
		var paged = 1;
		getData(paged++);
		var loading = false;  //状态标记
		$(".body-container").infinite().on("infinite", function() {
			if (loading)
				return;
			loading = true;
			setTimeout(function() {
				// 获取商品信息
				getData(paged++);
			}, 500); 
		});
		
	})
	
</script>
</html>